const buildColumns = (vm, demo) => {
  return [
    {
      align: 'center',
      title: '是否在线',
      key: 'online',
      render: (h, params) => {
        let row = params.row
        return filterOnline(h, row)
      }
    },
    {
      align: 'center',
      title: '状态',
      key: 'status',
      render: (h, params) => {
        return filterStatus(h, { ...params.row })
      }
    },
    {
      align: 'center',
      title: '设备ID',
      key: 'deviceNo'
    },
    {
      align: 'center',
      title: '设备名称',
      key: demo ? 'alias' : 'name'
    },
    {
      align: 'center',
      title: '设备类型',
      render: (h, params) => {
        let config = {
          1: '硬盘录像机',
          2: '热成像仪'
        }
        return h('span', config[params.row.type])
      }
    },
    {
      align: 'center',
      title: '设备位置',
      key: 'location'
    },
    {
      align: 'center',
      title: '所属企业',
      key: 'company'
    },
    {
      title: '网络类型',
      align: 'center',
      key: 'network'
    },
    {
      align: 'center',
      title: '创建时间',
      render: (h, params) => {
        const time = params.row.createdAt
        return h('span', vm.moment(time).format('YYYY-MM-DD HH:mm:ss'))
      }
    },
    {
      align: 'center',
      width: 180,
      title: '操作',
      render: (h, params) => {
        const row = { ...params.row }
        return filterHandle(vm, h, row, demo)
      }
    }
  ]
}

const filterHandle = (vm, h, row, demo) => {
  const { networkType, type } = row
  let detailButton = h(
    'Tooltip',
    {
      props: {
        content: '查看详情'
      }
    },
    [
      h('Button', {
        props: {
          type: 'info',
          size: 'small',
          shape: 'circle',
          icon: 'ios-desktop-outline',
          disabled: demo || row.company === '长沙平和堂五一广场店'
        },
        style: {
          marginRight: '5px'
        },
        on: {
          click: () => {
            vm.$router.push({
              path: '/video/device/detail/' + row.id
            })
          }
        }
      })
    ]
  )

  const yingPanLuXiangJiDelete = [
    h(
      'Poptip',
      {
        props: {
          confirm: true,
          title: '您确定要删除这条数据吗?与之关联的热成像仪也会一并删除。',
          transfer: true,
          cancelText: '取消'
        },
        on: {
          'on-ok': () => {
            vm.handleDelete(row)
          }
        }
      },
      [
        h(
          'Tooltip',
          {
            props: {
              content: '删除'
            }
          },
          [
            h('Button', {
              props: {
                type: 'error',
                size: 'small',
                shape: 'circle',
                icon: 'ios-trash-outline',
                disabled: demo || row.company == '长沙平和堂五一广场店'
              }
            })
          ]
        )
      ]
    )
  ]
  const otherDelete = [
    h(
      'Poptip',
      {
        props: {
          confirm: true,
          title: '您确定要删除这条数据吗?',
          transfer: true,
          cancelText: '取消'
        },
        on: {
          'on-ok': () => {
            vm.handleDelete(row)
          }
        }
      },
      [
        h(
          'Tooltip',
          {
            props: {
              content: '删除'
            }
          },
          [
            h('Button', {
              props: {
                type: 'error',
                size: 'small',
                shape: 'circle',
                icon: 'ios-trash-outline',
                disabled: demo || row.company == '长沙平和堂五一广场店'
              }
            })
          ]
        )
      ]
    )
  ]

  let buttonArr = [...(type === 2 ? otherDelete : yingPanLuXiangJiDelete)]

  const hotButton = h(
    'Tooltip',
    {
      props: {
        content: '热力分布'
      }
    },
    [
      h('Button', {
        props: {
          type: 'primary',
          size: 'small',
          shape: 'circle',
          icon: 'ios-pulse',
          disabled:
            networkType === 1 || demo || row.company == '长沙平和堂五一广场店'
        },
        style: {
          marginRight: '5px'
        },
        on: {
          click: () => {
            vm.$router.push({
              path: '/video/device/distribute/' + row.id
            })
          }
        }
      })
    ]
  )

  const videoButton = h(
    'Tooltip',
    {
      props: {
        content: '视频图像'
      }
    },
    [
      h('Button', {
        props: {
          type: 'success',
          size: 'small',
          shape: 'circle',
          icon: 'ios-videocam-outline',
          disabled:
            networkType === 1 || demo || row.company == '长沙平和堂五一广场店'
        },
        style: {
          marginRight: '5px'
        },
        on: {
          click: () => {
            vm.$router.push({
              path: '/video/device/player/' + row.id
            })
          }
        }
      })
    ]
  )

  if (row.videoStatus && row.networkType === 2) {
    buttonArr.unshift(videoButton)
  }
  if (row.heatStatus && row.networkType === 2) {
    buttonArr.unshift(hotButton)
  }
  // if (row.type === 2) {

  // }
  buttonArr.unshift(detailButton)
  return h('div', buttonArr)
}

const filterStatus = (h, row) => {
  let { status } = row
  let stateObject = {
    1: h(
      'Tag',
      {
        props: {
          color: 'success'
        }
      },
      '正常'
    ),
    2: h(
      'Tag',
      {
        props: {
          color: 'error'
        }
      },
      '告警'
    )
  }
  if (!(status in stateObject)) {
    return h(
      'Tag',
      {
        props: {
          color: 'default'
        }
      },
      '未知'
    )
  }
  return stateObject[status]
}

const filterOnline = (h, row) => {
  const { online } = row
  if (online)
    return h(
      'Tag',
      {
        props: {
          color: 'green'
        }
      },
      '在线'
    )
  else
    return h(
      'Tag',
      {
        props: {
          color: 'red'
        }
      },
      '离线'
    )
}

export default buildColumns
